<template>
    <a-drawer popup-container="#wrap" width="500px" :visible="show" :ok-loading="form.loading" @ok="submit"
        @cancel="show = false" unmountOnClose>
        <template #title>
            {{ $t('components.create.60zecmbl56w1') }}
        </template>
        <div class="table-info">
            <a-form ref="formRef" :model="form.data" @submit="submit" layout="vertical">
                <a-form-item field="factory" :label="$t('components.create.61zemc8cb712')"
                    :rules="[{ required: true, message: $t('components.create.61zemc8cb713') }]">
                    <a-input v-model="form.data.factory" :placeholder="$t('components.create.61zemc8cb713')" />
                </a-form-item>
                <a-form-item field="model" :label="$t('components.create.61zemc8cb714')"
                    :rules="[{ required: true, message: $t('components.create.61zemc8cb715') }]">
                    <a-input v-model="form.data.model" :placeholder="$t('components.create.61zemc8cb715')" />
                </a-form-item>
                <a-form-item field="factoryIndex" :label="$t('components.create.61zemc8cb718')"
                    :rules="[{ required: true, message: $t('components.create.61zemc8cb719') }]">
                    <a-input v-model="form.data.factoryIndex" :placeholder="$t('components.create.61zemc8cb719')" />
                </a-form-item>
                <a-form-item field="modelIndex" :label="$t('components.create.61zemc8cb720')"
                    :rules="[{ required: true, message: $t('components.create.61zemc8cb721') }]">
                    <a-input v-model="form.data.modelIndex" :placeholder="$t('components.create.61zemc8cb721')" />
                </a-form-item>
            </a-form>
        </div>
    </a-drawer>
</template>

<script lang='ts' setup>
import { defineModel } from 'vue'
import { apispectOperatorCreate } from '@/api/visual'
// const local = useLocal()

const show = defineModel('show', { default: false })
const formRef = ref()
const emit = defineEmits(['refresh'])
const form = reactive({
    data: {
        model: '',
        factory: '',
        // droneModel: '',
        factoryIndex: '',
        modelIndex: ''
        // uid: local.usermsg.id == 3 ? 0 : local.usermsg.id,
    },
    loading: false,
})
const submit = async () => {
    const validate = await formRef.value?.validate()
    if (validate) return;
    form.loading = true
    const { code } = await apispectOperatorCreate({
        ...form.data,
        // uid: local.usermsg.id == 3 ? 0 : local.usermsg.id,
        droneModel: `${form.data.factoryIndex}${form.data.modelIndex}`,
    })
    form.loading = false
    if (code != 200) return;
    emit('refresh')
    formRef.value?.resetFields()
    show.value = false
}
</script>

<style scoped></style>